<template>
  <div class="more-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="活动详情" name="first">
        <el-row>
          <!--  <el-col :span="7">

            <phonemode class="phonemode" style="margin-left:80px;"></phonemode>
          </el-col> -->
          <el-col :span="24">
            <div class="limits">
              <el-row v-if="infoData.is_free == 0">
                <el-col :span="12">
                  <el-alert
                    title="提示：本功能为付费项目，开通本功能前请仔细阅读功能说明及费用说明。"
                    type="warning"
                    show-icon
                  ></el-alert>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="2"><span class="title">活动进度</span></el-col>
                <el-col :span="14">
                  <el-steps
                    :active="infoData.step"
                    space="112px"
                    align-center
                    finish-status="success"
                  >
                    <el-step title="未申请"></el-step>
                    <el-step title="审核中"></el-step>
                    <el-step title="待开启"></el-step>
                    <el-step title="已上线"></el-step>
                  </el-steps>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="line"></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <div class="content-text">
                    <p
                      v-for="(item, index) in detail"
                      :class="item.title == 1 ? 'overstriking' : ''"
                      :key="index"
                      v-html="item.text"
                    >
                      {{ item.text }}
                    </p>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-checkbox v-model="checked">
                    我已认真阅读并知晓本活动详细规则
                  </el-checkbox>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-button
                    type="primary"
                    :disabled="
                      infoData.step == 2 ||
                      !checkPermission(['preparationOperate'])
                    "
                    :class="
                      infoData.step == 2 ? 'submitBtn addColorBtn' : 'submitBtn'
                    "
                    @click="submitRuler"
                  >
                    <span v-if="infoData.step == 1">立即申请</span>
                    <span v-if="infoData.step == 2">审核中</span>
                    <span v-if="infoData.step == 3">立即开启</span>
                    <span v-if="infoData.step == 4">下线</span>
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="套餐管理" name="second">
        <div class="secondCent">
          <div id="configinfo">
            <div class="innercontent">
              <h3>套餐包设置：</h3>
              <p>
                套餐包余量警告设置：
                <span
                  v-if="
                    (setting.status == 1 || setting.status == 3) &&
                    setting.status != 0
                  "
                >
                  套餐包剩余量不足
                  <span class="addColor">{{ setting.notice }}</span>
                  时发出警告。
                </span>
                <span class="addColor" v-else>
                  未设置
                  <i class="el-icon-warning-outline"></i>
                </span>
              </p>
              <p>
                套餐包自动续约设置：
                <span
                  v-if="
                    (setting.status == 2 || setting.status == 3) &&
                    setting.status != 0
                  "
                >
                  套餐包剩余不足
                  <span class="addColor">{{ setting.surplus }}</span>
                  时自动续订
                  <span class="addColor">{{ setting.total }}</span>
                  人次
                </span>
                <span class="addColor" v-else>
                  未设置
                  <i class="el-icon-warning-outline"></i>
                </span>
              </p>
              <span @click="openSetUp" class="addColorBlue">设置</span>
            </div>
          </div>
          <div class="tabs" id="initiate">
            <el-tabs
              v-model="initiateName"
              type="card"
              @tab-click="handleClickTc"
            >
              <el-tab-pane label="全部" name="qb" />
              <el-tab-pane label="待支付" name="dzf" />
              <el-tab-pane label="使用中" name="syz" />
              <el-tab-pane label="已用完" name="ygq" />
              <el-tab-pane label="已过期" name="yyw" />
            </el-tabs>
          </div>
          <el-row>
            <div class="addBtn">
              <el-button type="primary" @click="openSetMeal">
                购买套餐包
              </el-button>
              <span class="alltips">
                所有套餐剩余资源量
                <span class="addColor">{{ totalNum }}</span>
                人次
              </span>

              <div class="search">
                <el-form
                  ref="searchForm"
                  :model="searchForm"
                  size="small"
                  label-width="100px"
                >
                  <el-col :span="12">
                    <el-form-item label-width="0" prop="keyword">
                      <el-input
                        v-model="searchForm.keyword"
                        placeholder="请输入关键字"
                        clearable
                        :style="{ width: '100%' }"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <div class="rightbtn fr">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      size="small"
                      @click="searchlistTc"
                    >
                      查询
                    </el-button>
                    <el-button
                      icon="el-icon-refresh-left"
                      size="small"
                      @click="resetformTc"
                    >
                      重置
                    </el-button>
                  </div>
                </el-form>
              </div>
            </div>
          </el-row>
          <div class="Tables">
            <el-table
              :data="tableData"
              border
              style="width: 100%; margin-top: 30px"
              row-key="id"
            >
              <el-table-column
                prop="orderNum"
                label="套餐包编号 "
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="total"
                label="资源总量（人次） "
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="surplus"
                label="剩余量（人次） "
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="create_time"
                label="购买时间 "
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="due_time"
                label="有效截止时间 "
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="statusText"
                label="状态 "
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span :style="{ color: scope.row.statusText.color }">
                    {{ scope.row.statusText.title }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" align="center">
                <template slot-scope="scope">
                  <span
                    class="edittext"
                    @click="gopay(scope.row)"
                    v-if="scope.row.status == 0"
                  >
                    去支付
                  </span>
                  <span
                    class="edittext"
                    @click="goprepareCancel(scope.row.id)"
                    v-if="scope.row.status == 0"
                  >
                    取消订单
                  </span>
                  <span class="edittext" @click="lookForm(scope.row)" v-else>
                    查看消费记录
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <el-row>
              <el-col :span="24" class="pagination">
                <!-- 翻页 -->
                <el-pagination
                  class="fr"
                  @size-change="handleSizeChangeTc"
                  @current-change="handleCurrentChangeTc"
                  :current-page="pageTc"
                  :page-sizes="[10, 20, 30]"
                  :page-size="10"
                  background
                  layout="total, sizes, prev, pager, next"
                  :total="pagesTc.total"
                ></el-pagination>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="办理记录"
        name="three"
        v-if="checkPermission(['preparationHistory'])"
      >
        <div class="topsearch">
          <el-form
            ref="elForm"
            :model="formData"
            size="small"
            label-width="100px"
          >
            <el-row>
              <el-col :span="4">
                <el-row>
                  <el-form-item label-width="0" prop="keyword">
                    <el-input
                      v-model="formData.keyword"
                      placeholder="搜索姓名/电话"
                      clearable
                      :style="{ width: '93%' }"
                    ></el-input>
                  </el-form-item>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <el-form-item label-width="0" prop="record_id">
                    <el-select
                      v-model="formData.record_id"
                      placeholder="请选择套餐"
                      clearable
                      :style="{ width: '93%' }"
                    >
                      <el-option
                        v-for="(item, index) in packageOptions"
                        :key="index"
                        :label="item.value"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <span style="color: #fff">1</span>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <span style="color: #fff">1</span>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <span style="color: #fff">1</span>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <div class="rightbtn fr">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      size="small"
                      @click="searchlist"
                    >
                      查询
                    </el-button>
                    <el-button
                      icon="el-icon-refresh-left"
                      size="small"
                      @click="resetform"
                    >
                      重置
                    </el-button>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 表格 -->
        <studenttablehead
          :tabData="listData"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          v-if="issuccess"
        >
          <el-table-column
            show-overflow-tooltip
            label="线路详情"
            align="center"
            width="280px"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.pick_addr }}-{{ scope.row.arrive_addr }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="start_date"
            label="预约日期"
            align="center"
          ></el-table-column>
          <el-table-column label="预约时段" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.start_time }}-{{ scope.row.end_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="if_arrive"
            label="是否签到"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="body_check"
            label="体检状态"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="ele_photo"
            label="电子照片"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="state"
            label="预录入状态"
            align="center"
          ></el-table-column>
        </studenttablehead>
      </el-tab-pane>
    </el-tabs>
    <div class="backBtn" @click="backActivity">
      <img src="../../../assets/schooladmin/back.png" alt="" />
    </div>

    <deferdialog
      @confirm="deferconfirm"
      :isshowDialog="deferdialogShow"
      :dialogparams="dialogparams"
      @closedefer="closedefer"
    ></deferdialog>
    <setMeal
      @confirm="setMealconfirm"
      :isshowDialog="setMealdialogShow"
      :dialogparams="setMealdialogparams"
      @closedefer="setMealclosedefer"
    ></setMeal>
    <wechatCode
      :isshowDialog="isshowDialogWe"
      @closedefer="closedeferWe"
      :dialogparams="dialogparamsWe"
      :wechatUrl="wechatUrl"
    ></wechatCode>
  </div>
</template>

<script>
//按钮权限验证
import checkPermission from '@/utils/permission'
import phonemode from './component/phonemode'
import deferdialog from './component/deferdialog'
import setMeal from './component/setMeal'
import wechatCode from './component/wechatCode'
//api
import { activitysettingRule, activitycloseActivity } from '@/api/coupon'
import {
  getactivityread,
  activityapply,
  prepareHistory,
  packageRecord,
  orderCreate,
  wechatpayNative,
  orderCheckorder,
  prepareCancel,
  orderDeal,
  alipayNative,
} from '@/api/activity'
//学员表格
import studenttablehead from '@/components/studenthead'
import { MessageBox } from 'element-ui'
export default {
  data() {
    return {
      timer: null,
      orderId: null,
      //页码
      page: 1,
      pageTc: 1,
      //翻页总数
      total: 10,
      totalTc: 10,
      pagesTc: {
        page: 1,
        total: 0,
      },
      currentIndex: null,
      issuccess: false,
      deferdialogShow: false,
      setMealdialogShow: false,
      isshowDialogWe: false,
      initiateName: 'qb',
      changeimg: 'gd',
      detaiData: {},
      dialogparamsWe: {},
      orderId: null,
      setting: {},
      dialogparams: {},
      setMealdialogparams: {},
      searchForm: {},
      tableData: [],
      //右侧手机显示金额
      phoenmoney: undefined,
      checked: false,
      money: null,
      typeMoney: null,
      typeMaxMoney: null,
      detail: [],
      params: {},
      listData: {},
      formData: {
        keyword: '',
        record_id: '',
      },
      //tabs切换
      activeName: 'first',
      wechatUrl: '',
      ptionOne: [
        {
          label: '报名任何班型',
          value: 1,
        },
        {
          label: '首次打开',
          value: 2,
        },
      ],
      optionTwo: [
        {
          label: '报名券（推荐）',
          value: 1,
        },
        {
          label: '练车券',
          value: 2,
        },
        {
          label: '模拟券',
          value: 3,
        },
        {
          label: '考试券',
          value: 4,
        },
        {
          label: '陪练券',
          value: 5,
        },
        {
          label: '学车券',
          value: 6,
        },
      ],
      apply: {},
      infoData: {},
      readId: null,
      totalNum: null,
      sendNum: 0,
      packageOptions: [],
    }
  },
  components: {
    phonemode,
    studenttablehead,
    deferdialog,
    setMeal,
    wechatCode,
  },
  methods: {
    checkPermission,
    searchlist() {
      this.$message({
        type: 'success',
        message: '查询成功!',
      })

      this.getlistData()
    },
    changePackage() {},
    closedeferWe() {
      this.isshowDialogWe = false
      clearInterval(this.timer)
    },
    // 切换分类
    handleClickTc(tab, event) {
      this.currentIndex = tab.index
      this.pageTc = 1
      this.getTcData(tab.index)
    },
    //打开设置
    openSetUp() {
      this.deferdialogShow = true
    },
    //d打开购买
    openSetMeal() {
      this.setMealdialogShow = true
    },
    //关闭设置
    closedefer() {
      this.deferdialogShow = false

    },
    //设置成功
    deferconfirm() {
      this.deferdialogShow = false
      this.getTcData(this.currentIndex)
    },
    lookForm(val) {
      this.activeName = 'three'
      this.formData.record_id = val.id
      this.getlistData(this.readId)
    },
    //购买回调
    setMealconfirm(val) {
      let params = val
      this.getorderCreate(params)
    },
    //发送订单信息
    async getorderCreate(params) {
      let data = await orderCreate(params)
      this.orderId = data.data.order_id
      this.dialogparamsWe = data.data
      if (this.orderId) {
        this.isshowDialogWe = true
        this.getwechatpayNative(this.orderId)
      }
    },
    //取消订单
    async goprepareCancel(val) {
      let params={id: val}
      MessageBox.confirm('您确认要取消订单吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let data = await prepareCancel(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: data.msg,
            })
            this.getTcData(this.currentIndex)
          }
        })
        .catch(() => {})
    },
    async getorderDeal(orderId) {
      let data = await orderDeal({ orderId: orderId })
      this.dialogparamsWe = data.data
    },
    gopay(val) {
      this.orderId = val.order_id
      this.isshowDialogWe = true
      this.getorderDeal(this.orderId)
      this.getwechatpayNative(this.orderId)
    },
    //获取微信二维码
    async getwechatpayNative(orderId) {
      clearInterval(this.timer)
      this.wechatUrl = ''
      let dataW = await wechatpayNative({ orderId: orderId })
      if (dataW.code == '0000') {
        this.wechatUrl = dataW.data.url
        this.timeSend()
      }
    },
    //获取支付宝二维码
    async getalipayNative(orderId) {
      clearInterval(this.timer)
      this.wechatUrl = ''
      let dataW = await alipayNative({ orderId: orderId })
      if (dataW.code == '0000') {
        this.wechatUrl = dataW.data.url
        this.timeSend()
      }
    },
    //开启定时器
    timeSend() {
      var that = this
      let orderId = that.orderId

      that.timer = setInterval(async function () {
        let data = await orderCheckorder({ orderId: orderId })
        if (data.data.state == 1) {
          that.$message({
            type: 'success',
            message: '支付成功',
          })
          setTimeout(function(){
            that.closedeferWe()
            that.getTcData(this.currentIndex)
          },2000)
        
        }
      }, 2000)
    },
    //关闭购买
    setMealclosedefer() {
      this.setMealdialogShow = false
             this.getTcData(this.currentIndex)
    },
    //搜索套餐
    searchlistTc() {
      this.getTcData(this.currentIndex)
    },
    //重置套餐
    resetformTc() {
      this.$refs['searchForm'].resetFields()
      this.currentIndex = null;
      this.initiateName = 'qb'
      this.getTcData(this.currentIndex)
    },
    //重置
    resetform() {
      this.$refs['elForm'].resetFields()
      this.getlistData()
    },

    //翻页 一页有多少条数据
    handleSizeChange(val) {
      this.total = val
      //获取数据
      this.getlistData()
    },
    //翻页 一页有多少条数据
    handleSizeChangeTc(val) {
      this.totalTc = val
      //获取数据
      this.getTcData(this.currentIndex)
    },
    //翻页码
    handleCurrentChange(val) {
      this.page = val
      //获取数据
      this.getlistData()
    },
    //翻页码
    handleCurrentChangeTc(val) {
      this.pageTc = val

      //获取数据
      this.getTcData(this.currentIndex)
    },
    //获取列表
    async getlistData() {
      let params = {
        page: this.page,
        rows: this.total,
      }
      if (this.formData.keyword != '') {
        params.keyword = this.formData.keyword
      }
      if (this.formData.record_id != '') {
        params.record_id = this.formData.record_id
      }
      let data = await prepareHistory(params)
      if (data.code == '0000') {
        this.listData = data.data
        this.packageOptions = data.data.package
        this.issuccess = true
      }
    },
    //获取套餐列表
    async getTcData(val) {
      let params = {
        page: this.pageTc,
        rows: this.totalTc,
      }
      if (val != 0 && val) {
        params.status = val - 1
      }

      if (this.searchForm.keyword) {
        params.keyword = this.searchForm.keyword
      }
      let data = await packageRecord(params)
      if (data.code == '0000') {
        this.tableData = data.data.list
        this.setting = data.data.setting
        this.dialogparams = data.data.setting
        this.totalNum = data.data.total
        this.pagesTc = data.data.page
      }
    },
    //切换事件
    handleClick(tab, event) {
      this.page = 1
      this.total = 10
      this.formData.record_id = ''
      if (tab.name == 'first') {
        this.$nextTick(async () => {
          this.activityread(this.readId)
        })
      } else if (tab.name == 'second') {
        this.getTcData(this.currentIndex)
      }
      //获取领取记录
      else this.getlistData(this.readId)
    },

    backActivity() {
      this.$router.go(-1) //返回上一层
    },
    submitRuler() {
      if (!this.checked) {
        this.$message({
          type: 'error',
          message: '请先确认阅读',
        })
        return
      }
      if (this.infoData.step == 1) {
        this.applyactivity(this.readId)
      } else if (this.infoData.step == 2) {
        this.$message({
          message: '审核中，请耐心等待！',
        })
        return
      } else if (this.infoData.step == 3) {
        this.goactivitysettingRule()
      } else {
        this.closeActivity(this.readId)
      }
    },

    //获取规则配置
    async activityread(id) {
      let params = {
        id: id,
        _request: id,
      }
      let data = await getactivityread(params)
      if (data.code == '0000') {
        console.log(data)
        this.infoData = data.data
        this.apply = data.data.apply
        this.detail = JSON.parse(data.data.detail)
        this.$bus.emit('detaiData', data.data)
        if (data.data.rule) {
          this.params.rule_friend = data.data.rule.rule_friend
          this.params.rule_friend_rights = data.data.rule.rule_friend_rights
          this.params.rule_referrer = data.data.rule.rule_referrer
          this.params.rule_referrer_rights = data.data.rule.rule_referrer_rights
        }
      }
    }, //切换事件

    //活动设置
    async goactivitysettingRule() {
      let params = this.params
      params.apply_id = this.apply.id
      params._request = this.readId
      let data = await activitysettingRule(params)
      if (data.code == '0000') {
        this.$message({
          type: 'success',
          message: data.msg,
        })
        this.activityread(this.readId)
      }
    },
    //关闭活动
    async closeActivity(id) {
      let data = await activitycloseActivity({
        apply_id: this.apply.id,
        _request: id,
      })
      if (data.code == '0000') {
        this.$message({
          type: 'success',
          message: '下线成功',
        })
        this.activityread(this.readId)
      }
    },
    //申请活动
    applyactivity(id) {
      this.$confirm('您确认发起申请活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let params = {
            id,
            _request: id,
          }
          let data = await activityapply(params)
          if (data.code == '0000') {
            this.$message.success('发起活动成功！')
            //刷新列表
            this.activityread(this.readId)
          }
        })
        .catch(() => {})
    },
  },

  created() {
    //获取规则配置数据
    this.readId = this.$route.query.id
    this.$nextTick(async () => {
      this.activityread(this.readId)
    })
  },
  watch: {
    'infoData.step': function (val) {
      if (val == 4) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
  },
  mounted() {},
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-checkbox-group {
    display: flex;
    flex-direction: column;
  }

  .el-tabs__header {
    left: 55px;
  }

  .el-alert {
    margin-bottom: 2rem;
  }

  .el-checkbox {
    margin-top: 2rem;
  }

  .el-select {
    margin: 0 0.5rem;
  }

  .el-tabs__nav-wrap::after {
    height: 1px;
  }

  .el-checkbox {
    margin-bottom: 15px;
  }

  .el-tabs__item {
    font-size: 16px;
  }

  .el-tabs__item.is-active {
    font-weight: bold;
  }

  .ruleradio {
    .el-radio {
      display: block;
      display: flex;
      align-items: center;
      margin: 20px 0;

      .el-input {
        margin: 0 5px;
      }

      .el-input__inner {
        padding: 0 5px;
        text-align: center;
      }

      &:last-child {
        margin-bottom: 0;
      }

      &:first-child {
        margin-top: 8px;
      }
    }
  }

  .el-step__head.is-success {
    border-color: #3388ff;
    color: #fff;

    .el-step__icon {
      background-color: #3388ff;
      color: #fff;
    }
  }

  .el-step__title.is-success {
    color: #323233;
  }

  .el-step__head.is-process {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }

  .el-step__title {
    font-size: 14px;
    color: #323233;
  }

  .el-step__title.is-process {
    font-weight: normal;
  }
}

.limits {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 60px;

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .content-text {
    margin: 40px auto 0;

    .overstriking {
      font-weight: bold;
      font-size: 16px;
      color: #323233;
      padding: 10px 0 5px 0;
    }

    ul {
      li {
        text-align: justify;
        font-size: 13px;
        color: #666;
        line-height: 20px;
        margin-bottom: 10px;
        line-height: 32px;
      }
    }
  }
}

.submitBtn {
  margin-top: 1.5rem;
}

.addColorBtn {
  background-color: #ff7c24;
  border: 1px solid #ff8d3c;
}

.line {
  height: 1px;
  background-color: #707070;
  margin-top: 30px;
}

.more-container {
  position: relative;
}

.backBtn {
  position: absolute;
  left: 20px;
  top: 19px;
  background-color: #fff;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #e4e7ed;
  padding-right: 35px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  img {
    width: 20px;
    height: 20px;
  }
}
#configinfo {
  display: block;
  padding: 15px 23px;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #f2f6ff;
  margin-bottom: 20px;
  h3 {
    font-size: 14px;
    margin: 0;
    line-height: 30px;
  }
  p {
    line-height: 24px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #333;
  }
  .innercontent {
    position: relative;
  }
  .closeicon {
    position: absolute;
    right: -15px;
    top: -5px;
    cursor: pointer;
    font-size: 15px;
  }
}
.addColor {
  color: #ff4d4f;
}
.alltips {
  font-size: 12px;
  margin-left: 20px;
}
#initiate {
  margin-top: 20px;
}
.addColorBlue {
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 0;
  color: #4c68ef;
  cursor: pointer;
}
.addBtn {
  margin-top: 20px;
  position: relative;
}
.search {
  position: absolute;
  right: 0;
  top: 0;
}
.fr {
  float: right;
}
</style>
